<template>
  <div class="filter-container"
       v-loading="upload.isUploading"
       element-loading-text="拼命上传中..."
       element-loading-spinner="el-icon-loading"
  >
    <el-row :gutter="24" class="mb8">
      <el-col :span="8">
        PDF过滤
      </el-col>
      <el-col :span="16" style="text-align: right;">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="$router.go(0)"
        >刷新</el-button
        >
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="activeIndex" align-center>
          <el-step title="导入Excel" @click.native="clickValue(1)"></el-step>
          <el-step title="展示文件" description="点击文件夹，即可删除" @click.native="clickValue(2)"></el-step>
        </el-steps>
      </div>

      <div class="text item" v-if="activeIndex==1">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx"
              name="multipartFile"
              :headers="upload.headers"
              :action="upload.url"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="true"
              drag
              style="text-align: center;"
              v-hasPermi="['toolsystem:filter:import']"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“xlsx”格式文件！</div>
            </el-upload>
          </el-col>
        </el-row>
      </div>
      <div class="text item" v-if="activeIndex==2">
        <el-row :gutter="24">
          <el-col v-if="folderList.length>0" :span="4"  :lg="4" :md="6" :sm="12" :xs="24" v-for="(item, index) in folderList" :key="index" class="folder">
            <div @mouseover="mouseOverFolder(item)" @mouseout="mouseOutFolder(item)" class="box" :class="hasClass[item]?'hasClass':''">
              <i class="el-icon-s-management"></i>
              <div>{{item}}</div>
              <div v-show="hasClass[item]" class="shade">
                <div>
                  <el-button size="mini" type="primary" @click="downloadFolder(item)" v-hasPermi="['toolsystem:filter:remove']">下载</el-button>
                  <el-button size="mini" type="danger" @click="deleteFolder(item)" v-hasPermi="['toolsystem:filter:remove']">删除</el-button>
                </div>
              </div>
            </div>
          </el-col>

          <el-col v-if="folderList.length==0">
            <img src="../../../assets/images/empty.png" width="100" height="100"></img>
            <div style="color: #aaaaaa;font-size: 14px;">暂无文件</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { downLoadZip } from "@/utils/zipdownload";
  import { listFolder, deleteFolder } from "@/api/toolsystem/filter"
  export default {
    name: "FilterList",
    data(){
      return{
        activeIndex: 1,
        folderList: [],// 文件列表
        // 用户导入参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/tools-authreport/generatorPdfByExcel"
        },
        hasClass: {},
      }
    },
    methods:{
      clickValue(val){
        if(val==2){
          this.getListFolder()
        }
        this.activeIndex = val
      },
      // 下载按钮
      downloadFolder(item){
        console.log(item)
        const name = item;
        downLoadZip(`/tools-authreport/packing/${name}`, name);
      },
      // 删除按钮
      deleteFolder(item){
        this.$confirm(
          '是否确认删除该文件',
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            deleteFolder(item).then(response=>{
              console.log(response)
              if(response.code != 200) {
                this.hasClass[item]=false
                return this.msgError(response.msg)
              }
              this.msgSuccess(response.msg)
              this.getListFolder()
              this.hasClass[item]=false
            }).catch(error=>{
              console.log(error)
              this.hasClass[item]=false
            })
          })
          .catch(() => {
            this.msgInfo("取消删除");
            this.hasClass[item]=false
          });
      },
      // 鼠标移入事件
      mouseOverFolder(item){
        let is={};
        is[item] = true;
        this.hasClass = is;
      },
      // 鼠标移出事件
      mouseOutFolder(item){
        let is={};
        is[item] = false;
        this.hasClass = is;
      },
      // 获取文件数据列表
      getListFolder(){
        listFolder().then(response=>{
          this.folderList = response
          this.activeIndex = 2
        }).catch(error=>{
          console.log(error)
        })
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        console.log(response)
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        // this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getListFolder()
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/step.scss";
  .filter-container {
    padding: 20px;
    .el-card{
      .el-card__header{
        text-align: center;
      }
      .el-card__body {
        margin: 40px 0;
        text-align: center;
        .el-upload-dragger{
          width: 100%;
          min-width: 238px;
          max-width: 360px;
        }
        .folder{
          float: left;
          >.box{
            position: relative;
            display: inline-block;
            padding: 20px;
          }
          .hasClass{
            .shade{
              position: absolute;
              width: 100%;
              height: 100%;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              color: #ffffff;
              background-color: rgba(0,0,0,0.6);
              >div{
                width: 100%;
                height: 100%;
                .el-button:first-child{
                  position: absolute;
                  left: 50%;
                  top: 40%;
                  transform: translate(-50%, -50%);
                }
                .el-button:last-child{
                  position: absolute;
                  left: 50%;
                  top: 60%;
                  transform: translate(-50%, -50%);
                  margin-left: 0;
                }
              }
            }
          }
          .el-icon-s-management{
            font-size: 100px;
            color: #FFE698;
          }
        }
      }
    }
  }
  .el-step{
    cursor: pointer;
  }

</style>
